<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #000;
        }
        
		a {
            color:#333;
        }

		section {
            padding: 20px;
            background-color: #f0f0f0;
            margin-bottom: 20px;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 10px;
        }
        
        .exampleName{
			padding-top:20px;
		}

        .gallery div {
            background-color: #ccc;
            width: 380px;
            height: 200px;
            padding: 15px;
            padding-bottom:30px;
            text-align: left;
            border-radius: 8px;
        }
        
		.gallery div div {
			padding: 0px;
            padding-top: 2px;
			height:18px;
        }

        .gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Maintain aspect ratio and cover the entire container */
            border-radius: 8px; /* Apply border-radius to the image */
        }
    </style>
    <title>OF Examples Gallery</title>
</head>
<body>

<script>
        // Sample variable containing folder paths
        var myExamples = "REPLACE_ME";
        var myIndexFiles = "REPLACE_FILES";

        // Split the string into an array of paths
        var examplePaths = myExamples.split(',');
        var thumbFiles = myIndexFiles.split(',');

		var d = 0;
        // Create sections and populate galleries
        examplePaths.forEach(function (path) {
            var parts = path.split('/');
            var sectionHeader = parts[0];
            var imagePath = parts[1];
            var folderName = parts[1];

            // Create section if it doesn't exist
            var sectionId = sectionHeader.replace(/\s+/g, '');
            var section = document.getElementById(sectionId);
            if (!section) {
                section = document.createElement('section');
                section.id = sectionId;
                document.body.appendChild(section);

                var header = document.createElement('h2');
                header.textContent = sectionHeader;
                section.appendChild(header);

                var gallery = document.createElement('div');
                gallery.className = 'gallery';
                gallery.id = sectionId + 'Gallery';
                section.appendChild(gallery);
            }

            // Add image to the gallery
            var gallery = document.getElementById(sectionId + 'Gallery');
            var imageDiv = document.createElement('div');
            var image = document.createElement('img');
            var title = document.createElement('div');
            var link = document.createElement('a');
            link.href = path;
            link.target = "_blank";
            
            title.textContent = folderName;
            image.src = path + '/' + thumbFiles[d]; // Assuming the image file has the same name as the folder
            link.appendChild(image);
            link.appendChild(title);
            imageDiv.appendChild(link);
            gallery.appendChild(imageDiv);
            
            d++;
        });
    </script>


</body>
</html>
